<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            .box {
                width: 300px;
                height: 300px;
                background-color: skyblue;
                margin: 100px auto;
                padding: 10px;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div class="box" id="nav" data-sm="hello">
            hehe
        </div>
        <ul class="nav">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            // DOM：操作网页内容 BOM
            // DOM树：HTML文档以树状结构表示
            // CSS选择器获取DOM （重点）
            // 注意要在元素的下面写，否则是null

            // 1. 获取匹配的第一个元素
            const box = document.querySelector('div');
            // const box = document.querySelector('.box');
            // const box = document.querySelector('#nav');

            // 2. 获取匹配的多个元素 结果是伪数组，没有 pop push 方法 要用for遍历 获取单个可以用.item(index) 或者 [index] 方式
            const nodeListOf = document.querySelectorAll('.nav li');
            // nodeListOf.item(0).style.color = 'red'
            // nodeListOf.item(1).innerText = 'new text'
            // nodeListOf[2].innerText = 'new'


            // 操作元素内容 .innerText .innerHTML：可以解析标签
            console.log(box.innerText)

            // 操作元素属性：常用属性 href title src
            // 操作元素样式属性
            // 1. style 如果是有-连接的属性，用小驼峰就可以
            box.style.backgroundColor = '#FFAAFF'; // 'pink' 也可以
            // 2. className 添加类名或者覆盖类名 如果要多个类名 就用空格隔开
            box.className = 'box';
            // 3. classList 追加或删除类名
            box.classList.add('类名');
            box.classList.remove('类名');
            box.classList.toggle('类名'); // 切换 存在就remove 不存在就 add
            // box.classList.replace();

            // 操作表单元素属性 .value (innerHTML 获取不到表单内容) .type='password'
            // checked = true disabled = true selected = true



            // 自定义属性 H5新出的 data-自定义属性
            console.log(box.dataset.sm);


        </script>

    </body>
</html>